<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>用户管理</title>

		<meta name="description" content="Static &amp; Dynamic Tables" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/assets/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->

		<!-- text fonts -->
		<link rel="stylesheet" href="/assets/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="/assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="/assets/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="/assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="/assets/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="/assets/js/html5shiv.min.js"></script>
		<script src="/assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="skin-3">
		<div id="navbar" class="navbar navbar-default          ace-save-state">
			<div class="navbar-container ace-save-state" id="navbar-container">
				<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
					<span class="sr-only">Toggle sidebar</span>

					<span class="icon-bar"></span>

					<span class="icon-bar"></span>

					<span class="icon-bar"></span>
				</button>

				<div class="navbar-header pull-left">
					<a href="/jpetstore/main" class="navbar-brand">
						<small>
							<i class="fa fa-share-square-o"></i>
							<span class="red">MyPetStore</span>
							<span class="black">后台管理</span>
						</small>
					</a>
				</div>

				<div class="navbar-buttons navbar-header pull-right" role="navigation">
					<ul class="nav ace-nav">

						<li class="light-blue dropdown-modal">
							<a data-toggle="dropdown" href="#" class="dropdown-toggle">
								<img class="nav-user-photo" src="/assets/images/avatars/avatar2.png" alt="Jason's Photo" />
								<span class="user-info">
										<small>Hello, 管理员</small>
<!--																		<div th:text="${session.account.username}"></div>-->
									</span>

								<i class="ace-icon fa fa-caret-down"></i>
							</a>

							<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
								<li>
									<a href="/jpetstore/profile">
										<i class="ace-icon fa fa-cog"></i>
										个人设置
									</a>
								</li>


								<li class="divider"></li>

								<li>
									<a href="#">
										<i class="ace-icon fa fa-power-off"></i>
										注销
									</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div><!-- /.navbar-container -->
		</div>

		<div class="main-container ace-save-state" id="main-container">
			<script type="text/javascript">
				try{ace.settings.loadState('main-container')}catch(e){}
			</script>

			<div id="sidebar" class="sidebar                  responsive                    ace-save-state">
				<script type="text/javascript">
					try{ace.settings.loadState('sidebar')}catch(e){}
				</script>

				<ul class="nav nav-list">
					<li class="">
						<a href="/jpetstore/main">
							<i class="menu-icon fa fa-home"></i>
							<span class="menu-text"> 主页 </span>
						</a>

						<b class="arrow"></b>
					</li>
					<!--管理-->
					<li class="open">
						<a href="#" class="dropdown-toggle">
							<i class="menu-icon fa fa-list"></i>
							<span class="menu-text"> 管理 </span>

							<b class="arrow fa fa-angle-down"></b>
						</a>

						<b class="arrow"></b>

						<ul class="submenu">
							<li class="">
								<a href="/jpetstore/order">
									<i class="menu-icon fa fa-caret-right"></i>
									订单查询
								</a>

								<b class="arrow"></b>
							</li>

							<li class="">
								<a href="/jpetstore/product">
									<i class="menu-icon fa fa-caret-right"></i>
									宠物管理
								</a>

								<b class="arrow"></b>
							</li>

							<li class="active">
								<a href="/jpetstore/user">
									<i class="menu-icon fa fa-caret-right"></i>
									用户信息
								</a>

								<b class="arrow"></b>
							</li>
						</ul>
					</li>
					<!--管理员设置-->
					<li class="">
						<a href="/jpetstore/profile">
							<i class="menu-icon fa fa-user"></i>
							<span class="menu-text"> 管理员信息 </span>
						</a>

						<b class="arrow"></b>
					</li>
				</ul><!-- /.nav-list -->

				<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
					<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
				</div>
			</div>

			<div class="main-content">
				<div class="main-content-inner">
					<div class="breadcrumbs ace-save-state" id="breadcrumbs">
						<ul class="breadcrumb">
							<li>
								<i class="ace-icon fa fa-home home-icon"></i>
								<a href="/jpetstore/main">主页</a>
							</li>

							<li>
								<a href="#">管理</a>
							</li>
							<li class="active">用户信息</li>
						</ul><!-- /.breadcrumb -->
					</div>

					<div class="page-content">
						<div class="ace-settings-container" id="ace-settings-container">
							<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
								<i class="ace-icon fa fa-cog bigger-130"></i>
							</div>

							<div class="ace-settings-box clearfix" id="ace-settings-box">
								<div class="pull-left width-50">
									<div class="ace-settings-item">
										<div class="pull-left">
											<select id="skin-colorpicker" class="hide">
												<option data-skin="no-skin" value="blue">#438EB9</option>
												<option data-skin="skin-1" value="#222A2D">#222A2D</option>
												<option data-skin="skin-2" value="orange">orange</option>
												<option data-skin="skin-3" value="green">green</option>

											</select>
										</div>
										<span>&nbsp; 选择背景色</span>
									</div>

									<div class="ace-settings-item">
										<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off" />
										<label class="lbl" for="ace-settings-hover"> 整理菜单r</label>
									</div>

									<div class="ace-settings-item">
										<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off" />
										<label class="lbl" for="ace-settings-compact"> 收缩菜单</label>
									</div>

<!--									<div class="ace-settings-item">-->
<!--										<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off" />-->
<!--										<label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>-->
<!--									</div>-->
								</div><!-- /.pull-left -->

							</div><!-- /.ace-settings-box -->
						</div><!-- /.ace-settings-container -->

						<div class="page-header">
							<h1>
								用户列表
							</h1>
						</div><!-- /.page-header -->

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row">
									<div class="col-xs-12">
										<table id="simple-table" class="table  table-bordered table-hover">
											<thead>
												<tr>
													<th class="center">
														<label class="pos-rel">
															<input type="checkbox" class="ace" />
															<span class="lbl"></span>
														</label>
													</th>

													<th class="detail-col">详情</th>
													<th>用户名</th>
													<th>姓名</th>
													<th>邮箱</th>
													<th>密码</th>
													<th class="hidden-480">状态</th>

													<th></th>
												</tr>
											</thead>

											<tbody th:each="user:${userList}">
												<tr>
													<td class="center">
														<label class="pos-rel">
															<input type="checkbox" class="ace" />
															<span class="lbl"></span>
														</label>
													</td>

													<td class="center">
														<div class="action-buttons">
															<a href="#" class="green bigger-140 show-details-btn" title="详细信息">
																<i class="ace-icon fa fa-angle-double-down"></i>
																<span class="sr-only">详细信息</span>
															</a>
														</div>
													</td>

													<td id="table_username" th:text="${user.username}">用户名</td>
													<td>
														<div>
															<div id="table_lastname" style="float: left" th:text="${user.lastName}">姓</div>
															<div id="table_firstname" style="float: left" th:text="${user.firstName}">名</div>
														</div>
													</td>
													<td id="table_email" class="hidden-480" th:text="${user.email}">邮箱</td>
													<td id="table_password" th:text="${user.password}">密码</td>

													<td class="hidden-480">
														<span class="label label-sm label-success">状态</span>
													</td>
<!-- 按钮栏-->
													<td>
														<div class="hidden-sm hidden-xs btn-group">

															<button  class="btn btn-xs btn-info">
																<i class="ace-icon fa fa-pencil bigger-120"></i>
															</button>

															<button class="btn btn-xs btn-danger">
																<i class="ace-icon fa fa-trash-o bigger-120"></i>
															</button>

														</div>


													</td>
												</tr>
<!-- 隐藏细节栏-->
												<tr class="detail-row">
													<td colspan="8">
														<div class="table-detail">
															<div class="row">

																<div class="col-xs-12 col-sm-12">
																	<div class="space visible-xs"></div>

																	<div class="profile-user-info profile-user-info-striped">
																		<div class="profile-info-row">
																			<div class="profile-info-name"> 地址1 </div>

																			<div class="profile-info-value">
																				<span id="table_address1" th:text="${user.address1}">无</span>
																			</div>
																		</div>

																		<div class="profile-info-row">
																			<div class="profile-info-name"> 地址2 </div>

																			<div class="profile-info-value">
																				<span id="table_address2" th:text="${user.address2}">无</span>
																			</div>
																		</div>

																		<div class="profile-info-row">
																			<div class="profile-info-name"> 城市 </div>

																			<div class="profile-info-value">
																				<span id="table_city" th:text="${user.city}">无</span>
																			</div>
																		</div>

																		<div class="profile-info-row">
																			<div class="profile-info-name"> 州区 </div>

																			<div class="profile-info-value">
																				<span id="table_state" th:text="${user.state}">无</span>
																			</div>
																		</div>

																		<div class="profile-info-row">
																			<div class="profile-info-name"> 国家 </div>

																			<div class="profile-info-value">
																				<span id="table_country" th:text="${user.country}">无</span>
																			</div>
																		</div>

																		<div class="profile-info-row">
																			<div class="profile-info-name"> 邮政编码 </div>

																			<div class="profile-info-value">
																				<span id="table_zip" th:text="${user.zip}">无</span>
																			</div>
																		</div>


																		<div class="profile-info-row">
																			<div class="profile-info-name"> 电话号码 </div>

																			<div class="profile-info-value">
																				<span id="table_phone" th:text="${user.phone}">无</span>
																			</div>
																		</div>

																		<div class="profile-info-row">
																			<div class="profile-info-name"> 语言偏好 </div>

																			<div class="profile-info-value">
																				<span id="table_language" th:text="${user.languagePreference}">无</span>
																			</div>
																		</div>

																	</div>
																</div>

															</div>
														</div>
													</td>
												</tr>

											</tbody>
										</table>
									</div><!-- /.span -->
								</div><!-- /.row -->

								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div>
			</div><!-- /.main-content -->

			<div class="footer">
				<div class="footer-inner">
					<div class="footer-content">
						<span class="bigger-120">
							<span class="blue bolder">Ace</span>
							Application &copy; 2013-2014
						</span>

						&nbsp; &nbsp;
						<span class="action-buttons">
							<a href="#">
								<i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
							</a>

							<a href="#">
								<i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
							</a>

							<a href="#">
								<i class="ace-icon fa fa-rss-square orange bigger-150"></i>
							</a>
						</span>
					</div>
				</div>
			</div>

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->

		<!-- 修改弹出层 -->
		<div id="modal-table" class="modal fade" tabindex="-1">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header no-padding">
						<div class="table-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								<span class="white">&times;</span>
							</button>
							修改用户信息
						</div>
					</div>

					<div class="modal-body no-padding">
						<div class="hr hr-dotted"></div>
						<form action="/jpetstore/updateuser" class="form-horizontal" id="validation-form" method="post" th:object="${updateUser}">
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">用户名:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input th:field="*{username}" id="modal_username" class="col-xs-12 col-sm-6" type="text">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">密码:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input th:field="*{password}" name="modal_password" id="modal_password" class="col-xs-12 col-sm-6" type="text">
									</div>
								</div>
							</div>

							<div class="hr hr-dotted"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮箱:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input th:field="*{email}" id="modal_mail" name="modal_mail" class="col-xs-12 col-sm-6" type="email">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">电话号码:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="input-group">
								<span class="input-group-addon">
									<i class="ace-icon fa fa-phone"></i>
								</span>

										<input th:field="*{phone}" id="modal_phone" name="modal_phone" type="tel">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">邮政编码:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input th:field="*{zip}" id="modal_zip" class="col-xs-12 col-sm-6" type="text">
									</div>
								</div>
							</div>

							<div class="hr hr-dotted"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">姓名:</label>

								<div class="col-xs-12 col-sm-9">

									<div class="clearfix">
										<input th:field="*{firstName}" id="modal_firstname" class="input-small" type="text">
										<input th:field="*{lastName}" id="modal_lastname" class="input-small" type="text">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">地址:</label>

								<div class="col-xs-12 col-sm-9">

									<div class="clearfix">
										<input th:field="*{address1}" id="modal_addr1" class="input-small" type="text">
										<input th:field="*{address2}" id="modal_addr2" class="input-small" type="text">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">城市:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input th:field="*{city}" id="modal_city" class="col-xs-12 col-sm-6" type="text">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">州区:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input th:field="*{state}" id="modal_state" class="col-xs-12 col-sm-6" type="text">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">国家:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input th:field="*{country}" id="modal_country" class="col-xs-12 col-sm-6" type="text">
									</div>
								</div>
							</div>

							<div class="space-2"></div>

							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right">语言偏好:</label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<select id="modal_language" class="col-xs-12 col-sm-6" th:field="*{languagePreference}">
											<option th:each="language:${LANGUAGE_LIST}" th:value="${language}" th:text="${language}">

											</option>
										</select>
									</div>
								</div>
							</div>


							<hr>

						</form>


					</div>

					<div class="modal-footer no-margin-top">
						<button class="btn btn-sm btn-success pull-left" data-last="Finish">
							<i class="ace-icon fa fa-check"></i>
							提交
						</button>
						<button class="btn btn-sm btn-danger" data-dismiss="modal">
							<i class="ace-icon fa fa-times"></i>
							关闭
						</button>

					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div>
		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="/assets/js/jquery-2.1.4.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
<script src="/assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="/assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script src="/assets/js/jquery.dataTables.min.js"></script>
		<script src="/assets/js/jquery.dataTables.bootstrap.min.js"></script>
		<script src="/assets/js/dataTables.buttons.min.js"></script>
		<script src="/assets/js/buttons.flash.min.js"></script>
		<script src="/assets/js/buttons.html5.min.js"></script>
		<script src="/assets/js/buttons.print.min.js"></script>
		<script src="/assets/js/buttons.colVis.min.js"></script>
		<script src="/assets/js/dataTables.select.min.js"></script>

		<!-- ace scripts -->
		<script src="/assets/js/ace-elements.min.js"></script>
		<script src="/assets/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) {
				
				//And for the first simple table, which doesn't have TableTools or dataTables
				//select/deselect all rows according to table header checkbox
				var active_class = 'active';
				$('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
					var th_checked = this.checked;//checkbox inside "TH" table header
					
					$(this).closest('table').find('tbody > tr').each(function(){
						var row = this;
						if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
						else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
					});
				});
				
				//select/deselect a row when the checkbox is checked/unchecked
				$('#simple-table').on('click', 'td input[type=checkbox]' , function(){
					var $row = $(this).closest('tr');
					if($row.is('.detail-row ')) return;
					if(this.checked) $row.addClass(active_class);
					else $row.removeClass(active_class);
				});
			
				
			
				/********************************/
				//add tooltip for small view action buttons in dropdown menu
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				
				//tooltip placement on right or left
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					//var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
				
				
				
				
				/***************/
				$('.show-details-btn').on('click', function(e) {
					e.preventDefault();
					$(this).closest('tr').next().toggleClass('open');
					$(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass('fa-angle-double-up');
				});
				/***************/
				$('.fa-pencil').on('click', function(e) {
					var table_username = $(this).closest('tr').find("td[id='table_username']").text();
					var table_firstname = $(this).closest('tr').find("div[id='table_firstname']").text();
					var table_lastname = $(this).closest('tr').find("div[id='table_lastname']").text();
					var table_email = $(this).closest('tr').find("td[id='table_email']").text();
					var table_password = $(this).closest('tr').find("td[id='table_password']").text();
					var table_address1 = $(this).closest('tr').next().find("span[id='table_address1']").text();
					var table_address2 = $(this).closest('tr').next().find("span[id='table_address2']").text();
					var table_city = $(this).closest('tr').next().find("span[id='table_city']").text();
					var table_zip = $(this).closest('tr').next().find("span[id='table_zip']").text();
					var table_country = $(this).closest('tr').next().find("span[id='table_country']").text();
					var table_language = $(this).closest('tr').next().find("span[id='table_language']").text();
					var table_phone = $(this).closest('tr').next().find("span[id='table_phone']").text();
					var table_state = $(this).closest('tr').next().find("span[id='table_state']").text();
					$("#modal_username").val(table_username);
					$("#modal_password").val(table_password);
					$("#modal_mail").val(table_email);
					$("#modal_phone").val(table_phone);
					$("#modal_zip").val(table_zip);
					$("#modal_firstname").val(table_firstname);
					$("#modal_lastname").val(table_lastname);
					$("#modal_addr1").val(table_address1);
					$("#modal_addr2").val(table_address2);
					$("#modal_city").val(table_city);
					$("#modal_state").val(table_state);
					$("#modal_country").val(table_country);
					$("#modal_language").val(table_language);
					$("#modal-table").modal("show");
				});

				$('.fa-trash-o').on('click', function(e) {
					var table_username = $(this).closest('tr').find("td[id='table_username']").text();
					$.ajax({
						type:"get",
						url:"/jpetstore/deleteuser",
						data:{
							"username":table_username
						},
						dataType:"text",

						success:function(data){
							if (data == "fail"){

							}else {
								console.log(data);
								window.location.href = "/jpetstore/user";//指向登录的页面地址
							}
						}
					})
				});

				$('.btn-success').on('click',function (e) {
					$('#validation-form').submit();

				});
				
				/**
				//add horizontal scrollbars to a simple table
				$('#simple-table').css({'width':'2000px', 'max-width': 'none'}).wrap('<div style="width: 1000px;" />').parent().ace_scroll(
				  {
					horizontal: true,
					styleClass: 'scroll-top scroll-dark scroll-visible',//show the scrollbars on top(default is bottom)
					size: 2000,
					mouseWheelLock: true
				  }
				).css('padding-top', '12px');
				*/
			
			
			});
		</script>
	</body>
</html>
